Google 地图 JavaScript API（二） | Renko's blog | 人生如逆旅，我亦是行人

根据udacity课程学习的笔记。

1. 层

层是地图上的对象，包含一个或多个单独项，但可作为一个整体进行操作。层通常反映了您添加到地图上用于指定公共关联的对象集合。

数据层
Google 地图数据层提供了一个可用于储存任意地理空间数据的容器。您可以使用数据层储存您的自定义数据，或在 Google 地图上显示 GeoJSON 数据。
文档

Fusion Tables 图层/ 融合表层（试验性）
使用 FusionTablesLayer 对象将 Google Fusion Tables 中包含的数据呈现为地图上的图层。
文档

var map;
  //加载地图
  function initMap() {
    // Constructor creates a new map - only center and zoom are required.
    map = new google.maps.Map(document.getElementById('map'), {
      //中心 纬度 经度
      center: {lat: 30.317655, lng: 120.343745},
      //缩放值 越高越详细
      zoom: 13
    });

    var markers = [];

    //创建一组位置信息
    var locations = [
      {title:'building 1',location:{lat:30.310597,lng:120.343251}},
      {title:'building 2',location:{lat:30.313089,lng:120.340934}},
      {title:'building 3',location:{lat:30.313103,lng:120.344903}},
      {title:'building 4',location:{lat:30.310653,lng:120.347006}},
    ];

    //创建信息窗口
    var largeInfowindow = new google.maps.InfoWindow();
    //创建经纬度边界
    var bounds = new google.maps.LatLngBounds();

    //通过位置数组初始化创建标识数组
    for (var i = 0; i < locations.length; i++) {
      var position = locations[i].location;
      var title = locations[i].title;
      //为每个位置创建标识
      var marker = new google.maps.Marker({
        map: map,
        position: position,
        title: title,

        animation: google.maps.Animation.DROP,
        id: i
      });
      //把marker放进markers数组里
      markers.push(marker);
      //添加事件使得点击时打开信息窗口
      marker.addListener('click',function(){
        populateInfoWindow(this, largeInfowindow);
      });
      //传入各标识位置扩展边界
      bounds.extend(markers[i].position);
    }

    map.fitBounds(bounds);
  }

  // 点击标识时弹出信息窗口。
  function populateInfoWindow(marker, infowindow) {
    // 检查信息窗口还没有在这个标识打开
    if (infowindow.marker != marker) {
      infowindow.marker = marker;
      infowindow.setContent('<div>' + marker.title + '</div>');
      infowindow.open(map, marker);
      // 确保信息窗口关闭时已清空marker属性值
      infowindow.addListener('closeclick',function(){
        infowindow.setMarker = null;
      });
    }
  }

2. 标识显隐

1 2	<input id="show-listings" type="button" value="Show Listings"> <input id="hide-listings" type="button" value="Hide Listings">

function initMap() {
    map = new google.maps.Map(
        //省略同上
    });

    var locations = [
        //省略同上
    ];

    var largeInfowindow = new google.maps.InfoWindow();

    for (var i = 0; i < locations.length; i++) {
      var position = locations[i].location;
      var title = locations[i].title;
       var marker = new google.maps.Marker({
        //省略同上
      });
      markers.push(marker);
      marker.addListener('click', function() {
        populateInfoWindow(this, largeInfowindow);
      });
    }
    //不立即设置标识的地图参数和扩展地图界限，用showListings函数做
    document.getElementById('show-listings').addEventListener('click', showListings);
    document.getElementById('hide-listings').addEventListener('click', hideListings);
  }


  function populateInfoWindow(marker, infowindow) {
        //省略同上
  }

  // This function will loop through the markers array and display them all.
  function showListings() {
    var bounds = new google.maps.LatLngBounds();
    // Extend the boundaries of the map for each marker and display the marker
    for (var i = 0; i < markers.length; i++) {
      //将每个标识的地图设置为map
      markers[i].setMap(map);
      //扩展地图界限来容纳标识
      bounds.extend(markers[i].position);
    }
    map.fitBounds(bounds);
  }

  // This function will loop through the listings and hide them all.
  function hideListings() {
    for (var i = 0; i < markers.length; i++) {
      //不删除标识，只隐藏
      markers[i].setMap(null);
    }
  }

3. 设置地图样式

设置地图样式入门
可以利用样式化地图自定义 Google 基础地图的呈现方式，从而更改道路、公园和建成区等元素的视觉显示。

时髦地图
可获取预先构建的地图样式示例。

创建带样式的地图类型
 Styled Map Types
可以通过创建 StyledMapType 并向构造函数传递选择器和样式设置器信息，新增作为样式应用对象的地图类型。此方法不会影响默认地图类型的样式。

搜索GOOGLE MAPS API STYLES获得更多样式。

<script>
  var map;
  var markers = [];

  //加载地图
  function initMap() {
    // 改变地图样式
    var styles = [
      {
        //地图特征是可以在地图上作为目标的地理元素
        featureType: 'water',
        stylers: [
          { color: '#19a0d8' }
        ]
      },{
        featureType: 'administrative',
        //元素是想要对特征进行修改的对象(标签、图形等)
        elementType: 'labels.text.stroke',
        //应用于地图特征的颜色、可见属性
        stylers: [
          { color: '#ffffff' },
          { weight: 6 }
        ]
      },{
        featureType: 'administrative',
        elementType: 'labels.text.fill',
        stylers: [
          { color: '#e85113' }
        ]
      },{
        //蓝色高速公路
        featureType: 'road.highway',
        elementType: 'geometry.stroke',
        stylers: [
          { color: '#efe9e4' },
          { lightness: -40 }
        ]
      },{
        featureType: 'transit.station',
        stylers: [
          { weight: 9 },
          { hue: '#e85113' }
        ]
      },{
        featureType: 'road.highway',
        elementType: 'labels.icon',
        stylers: [
          { visibility: 'off' }
        ]
      },{
        featureType: 'water',
        elementType: 'labels.text.stroke',
        stylers: [
          { lightness: 100 }
        ]
      },{
        featureType: 'water',
        elementType: 'labels.text.fill',
        stylers: [
          { lightness: -100 }
        ]
      },{
        featureType: 'poi',
        elementType: 'geometry',
        stylers: [
          { visibility: 'on' },
          { color: '#f0e4d3' }
        ]
      },{
        featureType: 'road.highway',
        elementType: 'geometry.fill',
        stylers: [
          { color: '#efe9e4' },
          { lightness: -25 }
        ]
      }
    ];

    // Constructor creates a new map - only center and zoom are required.
    map = new google.maps.Map(document.getElementById('map'), {
      //中心 纬度 经度
      center: {lat: 30.317655, lng: 120.343745},
      //缩放值 越高越详细
      zoom: 13,
      //禁止用户将地图类型改为公路、地形、卫星等
      mapTypeControl: false,
      //设置地图对象选项中的属性
      styles: styles
    });
    // //创建寝室标识
    // var dorm  ={lat: 30.317655, lng: 120.343745};
    // var marker = new google.maps.Marker({
    //   //放置位置
    //   position: dorm,
    //   map: map,
    //   title: 'My Dorm'
    // });
    //
    // //创建信息窗口
    // var infowindow = new google.maps.InfoWindow({
    //   content: 'this is a infowindow'
    // });
    // //因为窗口不会自动打开，所以在事件监听器中调用方法
    // marker.addListener('click',function() {
    //   //传入窗口打开的地图和固定它的标记(后者可换为位置属性)
    //   infowindow.open(map,marker);
    // });

    //创建一组位置信息
    var locations = [
      {title:'building 1',location:{lat:30.310597,lng:120.343251}},
      {title:'building 2',location:{lat:30.313089,lng:120.340934}},
      {title:'building 3',location:{lat:30.313103,lng:120.344903}},
      {title:'building 4',location:{lat:30.310653,lng:120.347006}},
    ];

    //创建两个标记图标
    //标记出现在地图上时的默认图标
    var defaultIcon = makeMarkerIcon('0091ff');

    //鼠标移到地图上时突出显示的图标
    var highlightedIcon = makeMarkerIcon('FFFF24');

    //创建信息窗口
    var largeInfowindow = new google.maps.InfoWindow();

    //通过位置数组初始化创建标识数组
    for (var i = 0; i < locations.length; i++) {
      var position = locations[i].location;
      var title = locations[i].title;
      //为每个位置创建标识
      var marker = new google.maps.Marker({
        map: map,
        position: position,
        title: title,
        //将每个标记的图标设置为默认图标
        icon: defaultIcon,
        animation: google.maps.Animation.DROP,
        id: i
      });
      //把marker放进markers数组里
      markers.push(marker);
      //添加事件使得点击时打开信息窗口
      marker.addListener('click',function(){
        populateInfoWindow(this, largeInfowindow);
      });
      // //传入各标识位置扩展边界
      // bounds.extend(markers[i].position);

      //鼠标悬停时突出显示图标
      marker.addListener('mouseover', function() {
        this.setIcon(highlightedIcon);
      });
      //鼠标移开时恢复默认图标
      marker.addListener('mouseout', function() {
        this.setIcon(defaultIcon);
      });
    }

    //map.fitBounds(bounds);

    //不立即设置标识的地图参数和扩展地图界限，用showListings函数做
    document.getElementById('show-listings').addEventListener('click', showListings);
    document.getElementById('hide-listings').addEventListener('click', hideListings);
  }

  // 点击标识时弹出信息窗口。
  function populateInfoWindow(marker, infowindow) {
    // 检查信息窗口还没有在这个标识打开
    if (infowindow.marker != marker) {
      infowindow.marker = marker;
      infowindow.setContent('<div>' + marker.title + '</div>');
      infowindow.open(map, marker);
      // 确保信息窗口关闭时已清空marker属性值
      infowindow.addListener('closeclick',function(){
        infowindow.setMarker = null;
      });
    }
  }

  // This function will loop through the markers array and display them all.
  function showListings() {
    //创建经纬度边界
    var bounds = new google.maps.LatLngBounds();
    // Extend the boundaries of the map for each marker and display the marker
    for (var i = 0; i < markers.length; i++) {
      //将每个标识的地图设置为map
      markers[i].setMap(map);
      //扩展地图界限来容纳标识
      bounds.extend(markers[i].position);
    }
    map.fitBounds(bounds);
  }

  // This function will loop through the listings and hide them all.
  function hideListings() {
    for (var i = 0; i < markers.length; i++) {
      //不删除标识，只隐藏
      markers[i].setMap(null);
    }
  }

  //创建标记图标对象函数
  function makeMarkerIcon(markerColor) {
    //获取标记颜色并创建markerimage(标记图像)使用该颜色，自定义其尺寸
    var markerImage = new google.maps.MarkerImage(
      'http://chart.googleapis.com/chart?chst=d_map_spin&chld=1.15|0|'+ markerColor +
      '|40|_|%E2%80%A2',
      new google.maps.Size(21, 34),
      new google.maps.Point(0, 0),
      new google.maps.Point(10, 34),
      new google.maps.Size(21,34)
    );
    return markerImage;
  }
</script>